<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<body>
  <style>
   

    /* 1.子孙选择都可以 */
    article:has(h1) {
        margin: 0 0 0.25rem 0;
        /* color: yellow; */
    }
    .card1{
      width: 100px;
      height: 100px;
      background: black;
    }

    .card2{
      width: 100px;
      height: 100px;
      background: black;
    }
    section:has(h1:hover){
        color: rgb(240, 0, 0) !important;
    }
    </style>
   

      <section>
        <article>
          <h1>Morning Times</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </article>
        <article>
          <!-- <h1 class="test1">Morning Times</h1> -->
          <div></div>
          <h2 class="test2">Delivering you news every morning</h2>
          
        </article>
        <div class="parent_container">
          <div class="card1">
            <h1>1</h1>
          </div>
        </div>

      </section>
 
</body>
</html>